<template>
	<view class="page" :style="$theme.pageStyle">

		<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed"
			title="商品详情">
			<view class="preview" slot="center">商品详情</view>
		</z-nav-bar>

		<view class="top">
			<view class="banner">
				<u-swiper :list="GoodsInfo.goods_image" @change="e => currentNum = e.current" :autoplay="false"
					indicatorStyle="right: 20px;bottom: 30px;" :height="SweipeHeight" radius="0" indicator
					indicatorMode="line" circular>
				</u-swiper>
			</view>
		</view>
		<view v-if="GoodsInfo.preheat == 1" class="activity-card seckill-card rd-t-40rpx relative h-120 flex justify-between"
			style="background-image: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/101720614490zNCeCo.png');">
			<view class="flex items-baseline text--w111-fff mt-8">
				<text class="fs-38 fw-600 lh-60rpx pr-16">开售倒计时</text>
			</view>
			<view class="flex-col">
				<text class="fs-20 text--w111-fff lh-28rpx text-right pb-4">距开始还剩</text>
				<u-count-down :time="GoodsInfo.countdownSeconds * 1000" format="HH:mm:ss" autoStart
					millisecond @change="onTimeChange" @finish="onTimeFinish">
					<view class="time">
						<view class="time__custom__day" v-if="timeData.days > 0">
							<text class="time__custom__item__day">{{ timeData.days }} 天</text>
						</view>
						<text class="time__doc" v-if="timeData.days > 0">:</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.minutes }}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
			</view>
		</view>
		<view class="center">
			<view class="center_box">
				<view class="center_box_top">
					<view class="center_box_top_left">
						<span class="span">¥</span><span class="price">{{specSelect.price}}</span>
						<!-- <span class="huaxian">¥{{GoodsInfo.scribing_price}}</span> -->
					</view>
					<button class="center_box_top_right" @click="openPoster">
						<image
							src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/80506177772f4a59951b6fa40bc5a4ed_mergeImage.png"
							mode=""></image>
					</button>
				</view>
				<view class="center_box_top_title">
					<view class="center_box_top_title_title">
						{{GoodsInfo.name}}
					</view>
					<view class="center_box_top_title_desc">
						{{GoodsInfo.remarks}}
					</view>
				</view>
				<!-- 库存销量 -->
				<view class="flex-between-center mt-24 text--w111-999 fs-22 lh-30rpx">
					<text>原价：￥ {{specSelect.scribing_price}}</text>
					<text>库存： {{specSelect.stock}}</text>
					<text>销量：0</text>
				</view>
				<!-- 商品标签 -->
				<view class="flex items-end flex-wrap mt-24 w-full">
					<view style="margin-right: 5px;">
						<u-tag :text="GoodsInfo.category_desc" type="warning" size="mini" plain plainFill></u-tag>
					</view>
					<view style="margin-right: 5px;">
						<u-tag :text="GoodsInfo.departureDuration" type="success" size="mini" plain plainFill
							style="margin-right: 5px;"></u-tag>
					</view>
					<view style="margin-right: 5px;">
						<u-tag :text="GoodsInfo.destination" type="error" size="mini" plain plainFill
							style="margin-right: 5px;"></u-tag>
					</view>
					<view style="margin-right: 5px;">
						<u-tag :text="GoodsInfo.age" type="primary" size="mini" plain plainFill
							style="margin-right: 5px;"></u-tag>
					</view>
				</view>
			</view>
		</view>

		<view class="px-20">
			<!--  SKU选择  -->
			<view class="rd-16rpx bg--w111-fff mt-20" v-if="GoodsInfo.spec_type == 2">
				<view class="flex-between-center h-100 px-20" @click="Show()">
					<view class="flex-y-center">
						<text class="fs-26 text--w111-888">选择</text>
						<view class="ml-32 text--w111-333 fs-26 w-560 line1">{{specSelect.sku_value}}</view>
					</view>
					<uni-icons type="right" size="12"></uni-icons>
					<!-- <text class="iconfont icon-ic_rightarrow fs-24 text--w111-666"></text> -->
				</view>
			</view>

			<!-- 评价卡片 -->
			<view class="rd-24rpx bg--w111-fff mt-20 py-32" v-if="GoodsInfo.comment.count > 0">
				<view class="px-20 flex-between-center">
					<view>
						<text class="text--w111-333 fs-30 fw-500">评价</text>
						<text class="fs-24 text--w111-666 pl-8">({{GoodsInfo.comment.count}})</text>
					</view>
					<view class="flex-y-center">
						<text class="fs-28 text-primary-con">{{GoodsInfo.comment.good_rate}}%</text>
						<text class="fs-24 text--w111-999 pr-12">好评率</text>
						<uni-icons type="right" size="12"></uni-icons>
					</view>
				</view>
				<!-- 滑动内容 -->
				<scroll-view ref="scroll" scroll-x="true" class="scroll w-690 mt-24 pl-20" show-scrollbar="true" @scroll="scroll">
					<view class="scrll-box">
						<view class="inline-block mr-20" v-for="item in GoodsInfo.comment.list" :key="item.id" @click.stop="details(item)">
							<view class="h-192 rd-16rpx bg--w111-f5f5f5 flex justify-between">
								<view class="flex-1 p-24">
									<view class="flex-y-center">
										<image class="w-64 h-64 rd-50-p111-" :src="item.avatar" mode="aspectFill"></image>
										<view class="flex-col pl-16">
											<text class="text--w111-333 fs-24">{{ item.nickname }}</text>
											<view class="flex text--w111-333 fs-24">
												<uni-icons type="star" color="var(--color-primary)" size="15"></uni-icons> <span style="margin-left: 5px;">{{item.service_comment}}</span>
											</view>
										</view>
									</view>
									<view class="w-324 mt-12 text--w111-333 fs-24 break_word line2">{{ item.comment }}</view>
								</view>
								<image v-if="item.imglist.length" class="w-192 h-192 rd-16rpx" :src="item.imglist[0]"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>


		<!-- <view class="guige" @click="opencoupon()">
			<view class="guige_top">
				<view class="guige_top_left">
					优惠券
				</view>
				<view class="guige_top_right">
					<tn-icon icon="right" size="sm"></tn-icon>
				</view>
			</view>
			<view class="guige_btn">
				<view class="guige_btn_text">
					可用
				</view>
				<view class="guige_btn_text" style="color: #666;font-size: 14px;" v-if="coupon_id === 0">
					{{ CouponNunber }}
				</view>
				<view class="guige_btn_text" style="color: #666;font-size: 14px;color: red;" v-else>
					- {{ coupon_money }}
				</view>
			</view>
		</view> -->



		<!-- <view class="pingjia" @click="Tourl('/service/goods/evaluate?id=' + GoodsInfo.id)">
			<view class="pingjia_top">
				<view class="pingjia_top_left">
					商品评价（{{GoodsInfo.comment}}）
				</view>
				<view class="pingjia_top_right">
					<tn-icon icon="right" size="sm"></tn-icon>
				</view>
			</view>
		</view> -->


		<view class="pingjia" @click="Tourl('/pages/shop/evaluate?id=' + GoodsInfo.id)">
			<view class="pingjia_top">
				<view class="pingjia_top_left">
					商品详情
				</view>
				<view class="pingjia_top_right">
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>
			<view class="pingjia_btn" style="width: 100%;">
				<view class="desc" style="border-radius: 15px;width: 100%;">
					<u-parse :content="GoodsInfo.content"></u-parse>
				</view>
			</view>
		</view>


		<view class="btn_box bg--w111-fff-s111-80 pb-safe">
			<view class="btn_box_gwc" @click="ToCar()">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/211699894461q92vCT.png" />
				<text class="btn_box_gwc_text">购物车</text>
			</view>
			<button class="btn_box_kf" open-type="contact">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/461699894426XgICJK.png" />
				<text class="btn_box_kf_text">客服</text>
			</button>
			<view class="btn_right_dis" v-if="GoodsInfo.preheat == 1">
				<text>还未开始</text>
			</view>
			<view class="btn_right" @click="Show()" v-else>
				<text>立即报名</text>
			</view>
			
			
		</view>


		<u-popup :show="guigeshow" :round="15" @close="guigeclose" @open="guigeopen">

			<view class="pops" style="padding: 15px;">
				<view class="guige_topbox">
					<view class="guige_left_topbox">
						<image :src="GoodsInfo.goods_image[0]" mode=""></image>
					</view>
					<view class="guige_right_topbox">
						<view class="guige_top_price">
							<span>¥</span> {{specSelect.price}}
						</view>
						<view class="guige_top_huaxianprice">
							¥{{specSelect.scribing_price}}
						</view>
						<view class="guige_top_descprice" style="display: flex;">
							<view v-if="GoodsInfo.spec_type === 2">
								已选{{specSelect.sku_value}}
							</view>
							<span style="margin-left: 15px;">库存 : {{specSelect.stock}}</span>
						</view>
					</view>
				</view>

				<view class="line" v-if="GoodsInfo.spec_type == 2"></view>

				<view class="" v-if="GoodsInfo.spec">
					<view class="guige_title">
						选择项目
					</view>
					<view class="guige_box_list">
						<block v-for="(item, index) in GoodsInfo.spec" :key="index">
							<view class="guige_box" :class="{ 'selectgg': index === selectedSpecIndex }"
								@click="selectSpec(index , item)">
								<view class="guige_box_tit" :class="{ 'specselectcolor': index === selectedSpecIndex }">
									{{ item.sku_value }}
								</view>
								<view class="guige_box_price"
									:class="{ 'specselectcolor': index === selectedSpecIndex }">¥ {{ item.price }}
								</view>
							</view>
						</block>
					</view>
				</view>

				<view class="line mg15" v-if="GoodsInfo.spec_type == 2"></view>

				<view class="pop_btn" @click="ToBuy()">
					立即报名
				</view>
				
			</view>
		</u-popup>



		<!-- 选择优惠券弹出层 -->
		<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
		<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
			<scroll-view class="scrolls" scroll-y>
				<!-- colors:按钮颜色 couponList:优惠卷列表数据  @onReceive：领取或立即使用按钮事件 -->
				<!-- <cc-defineCoupon colors="#fa436a" :couponList="couponList" @onReceive="onReceive"></cc-defineCoupon> -->
			</scroll-view>
		</view>

		<view class="zhanwei" style="height: 80px;">

		</view>


	</view>
</template>


<script>
	import $H from '@/common/js/request.js';
	import userEvaluation from '@/components/userEvaluation';
	export default {
		components: {
			userEvaluation
		},
		data() {
			return {
				showShare: false,
				showshare: false,
				guigeshow: false,
				canshushow: false,
				baozhangshow: false,
				showPoster: false,
				carnumber: 1,
				is_buy: 1,
				currentNum: 0,
				constants: {},
				GoodsInfo: {},
				spec: {},
				selectedSpecIndex: 0, // 默认选择第一个规格项
				selectedServiceIndex: null, // 默认没有选择任何配送服务
				selectedServiceid: 0,
				selectedServiceitem: {},
				isLogin: 0,
				SweipeHeight: uni.getStorageSync('screenHeight'),
				number: 1,
				paypop: false,
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: 1,
				selectedIndex: 10,
				post: '',
				couponshow: false,
				couponList: [],
				coupon_id: 0,
				coupon_money: 0,
				CouponNunber: 0,
				scrollTop: 0,
				specSelect: {},
				timeData: {},
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			//判断用户是否登录
			if (uni.getStorageSync('token') == '') {
				this.isLogin = 0
			} else {
				this.isLogin = 1
				//this.getCoupon()
			}
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中..'
			})
			this.id = opt.id
			this.getGoodsDetail()
			// this.getCoupon()
		},
		onShareAppMessage() { // 分享到微信好友
			// 更多参数配置，参考文档
			return {
				title: this.GoodsInfo.name,
				path: '/pages/goods/detail?id=' + this.GoodsInfo.id,
				imageUrl: this.GoodsInfo.goods_image[0],
			}
		},
		onShareTimeline() { // 分享到朋友圈
			return {
				title: this.GoodsInfo.name,
				path: '/service/goods/detail?id=' + this.GoodsInfo.id,
				imageUrl: this.GoodsInfo.goods_image[0],
			}
		},
		methods: {
			onTimeChange(e) {
				//console.log(e);
				this.timeData = e
			},
			onTimeFinish(){
				this.TimeFinish();
			},
			TimeFinish() {
				$H.post('goods/TimeFinish', {
					id: this.id,
				}, {
					token: true
				}).then(res => {
					this.getGoodsDetail()
				})
			},
			openPoster() {
				console.log(111111)
				this.showshare = true
			},
			closeshowshare() {
				this.showshare = false;
			},
			openshowshare() {},
			closeshowPoster() {
				this.showPoster = false;
			},
			openshowPoster() {},
			closeshowTips() {
				this.showTips = false;
			},
			openshowTips() {},
			//关闭海报
			hidePoster() {
				this.$refs.popup.close()
			},
			closespaypop() {
				this.paypop = false
			},
			openpaypop() {},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			ShowPay() {
				this.paypop = true
				this.guigeshow = false
			},
			async getGoodsDetail() {
				try {
					const res = await $H.post('goods/detail', {
						id: this.id
					}, {
						token: false
					});
					this.GoodsInfo = res.data
					if (this.GoodsInfo.spec_type == 2) {
						//自动选择规格
						this.specSelect = this.GoodsInfo.spec[0]
					} else {
						this.specSelect = this.GoodsInfo
					}
					this.post = this.GoodsInfo.goods_image[0]
				} catch (error) {

				} finally {
					uni.hideLoading();
				}
			},
			getCoupon() {
				$H.get('order/coupon', {
					id: this.id,
					type: 4
				}, {
					token: true
				}).then(res => {
					this.couponList = res.data
					this.CouponNunber = res.data.length
				})
			},
			Show() {
				this.guigeshow = true
			},
			guigeclose() {
				this.guigeshow = false
			},
			guigeopen() {},
			valChange(e) {
				this.number = e.value
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			ToBuy() {

				uni.setStorageSync('specSelect', this.specSelect)

				uni.setStorageSync('goods_id', this.id)

				uni.navigateTo({
					url: '/pages/goods/card'
				})
			},
			// 打开优惠券弹框 
			opencoupon() {
				this.couponshow = true
			},
			// 关闭优惠券弹框 
			hidecoupon() {
				this.couponshow = false
			},
			//领取优惠券 立即使用事件
			onReceive(item, index) {
				this.coupon_id = item.id
				this.coupon_money = item.money
				this.hidecoupon()
			},
			selectSpec(index, item) {
				this.selectedSpecIndex = index;
				//改变规格
				this.specSelect = item
			},
		},
	}
</script>


<style lang="scss" scoped>
	.center_poter {
		position: relative;
		z-index: 999;

		.close_btn {
			width: 40upx;
			height: 40upx;
			// background-color: rgba($color: #000000, $alpha: .3);
			position: absolute;
			top: 5upx;
			right: 5upx;
			z-index: 500;
			padding: 5upx;
			border-radius: 6upx;
			z-index: 999;
			text-align: center;
		}
	}


	.page {
		background-color: rgba(246, 247, 247, 1);
		font-family: "SemiBold";

		.top {
			background: #fff;

			/* 为 .top 添加样式 */
			.address {
				// margin-left: 15px;
				padding: 10px;

				span {
					color: rgba(57, 57, 57, 1);
					font-size: 16px;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					text-align: left;
					white-space: nowrap;
					line-height: 18px;
					margin-left: 5px;
					margin-right: 5px;
				}
			}

			.banner {

				/* 为 .banner 添加样式 */
				image {
					width: 100%;
					height: 350px;
					/* 为 <img> 添加样式 */
				}
			}
		}

		.center {
			padding: 10px;
			background: linear-gradient(180deg, #fff, #fff 54%, hsla(0, 0%, 100%, 0));
			margin-top: -17px;
			border-radius: 20px;
			z-index: 10;
			position: relative;

			/* 为 .center 添加样式 */
			.center_box {
				padding: 10px;

				/* 为 .center_box 添加样式 */
				.center_box_top {
					display: flex;
					justify-content: space-between;

					/* 为 .center_box_top 添加样式 */
					.center_box_top_left {
						display: flex;
						height: 25px;
						line-height: 25px;

						.price {
							color: #CB9668;
							font-size: 26px;
							font-weight: 600;
						}

						.span {
							color: #CB9668;
							font-size: 12px;
							margin-right: 5px;
							line-height: 30px;
						}

						.huaxian {
							color: #C4C4C4;
							font-size: 14px;
							margin-left: 5px;
							margin-top: 1.5px;
							text-decoration: line-through;
							margin-left: 10px;
						}
					}

					.center_box_top_right {
						image {
							width: 25px;
							height: 25px;
							margin-left: 25px;
						}
					}
				}

				.center_box_top_title {
					.center_box_top_title_title {
						margin-top: 5px;
						color: #000;
						font-size: 18px;
						font-weight: bold;
					}

					.center_box_top_title_desc {
						margin-top: 5px;
						color: #C4C4C4;
						font-size: 12px;
					}
				}

				.line {
					height: 1px;
					background: #F1F1F1;
					margin-top: 5px;
					margin-bottom: 5px;
				}

				.center_box_top_btn {

					.yunfei {
						color: #A9A9A9;
						font-size: 14px;
					}

					.yunfeidesc {
						color: #393939;
						font-size: 14px;
						margin-left: 10px;
					}
				}

				/* 其他样式 */
			}
		}
	}

	.au_box {
		margin: 15px;
		background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f856152f363f40bb9a868d45d01d7b42_mergeImage.png);
		border-radius: 8px;
		margin-top: 15px;
		padding: 12px 0px 12px 0px;
		display: flex;
		justify-content: space-between;

		.au_box_left {
			padding: 0px 10px 0px 10px;
			color: #fff;
			display: flex;
			width: 100%;

			.au_box_store {
				width: 25%;
				display: flex;
				font-size: 12px;
				height: 25px;
				line-height: 25px;
				margin-right: 5px;
				overflow: hidden;
			}

			.au_box_right {}
		}

	}

	.btn_box {
		bottom: 0;
		position: fixed;
		display: flex;
		width: 100%;
		height: 55px;
		padding-left: 5%;
		backdrop-filter: blur(10px);
		border-top: 1px solid #f5f5f5;

		& .btn_box_gwc {
			display: grid;
			width: 15%;
			align-content: center;
			text-align: center;
			justify-content: center;

			& image {
				width: 25px;
				height: 25px;
			}

			& .btn_box_gwc_text {
				color: #666666;
				font-size: 12px;
			}
		}

		& .btn_box_kf {
			display: grid;
			width: 15%;
			align-content: center;
			text-align: center;
			justify-content: center;

			& image {
				width: 25px;
				height: 25px;
			}

			& .btn_box_kf_text {
				color: #666666;
				font-size: 12px;
			}
		}

		& .btn_left {
			width: 30%;
			height: 45px;
			background: #323232;
			border-radius: 12px 0px 0px 12px;
			text-align: center;
			margin-top: 5px;
			margin-left: 10px;

			& text {
				text-align: center;
				font-size: 16px;
				line-height: 45px;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		& .btn_right {
			width: 60%;
			height: 45px;
			background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
			border-radius: 12px 12px 12px 12px;
			text-align: center;
			margin-top: 5px;

			& text {
				text-align: center;
				font-size: 16px;
				line-height: 45px;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		
		& .btn_right_dis {
			width: 60%;
			height: 45px;
			background: #ccc;
			border-radius: 12px 12px 12px 12px;
			text-align: center;
			margin-top: 5px;
		
			& text {
				text-align: center;
				font-size: 16px;
				line-height: 45px;
				font-weight: 400;
				color: #fff;
			}
		}

	}

	//规格
	.guige {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;

		& .guige_top {
			padding: 5px;
			display: flex;
			justify-content: space-between;

			& .guige_top_left {
				color: #A9A9A9;
			}

			& .guige_top_right {
				// 样式
			}
		}

		& .guige_btn {
			padding: 5px;
			display: flex;
			justify-content: space-between;

			& .guige_btn_text {
				color: #393939;
				font-size: 16px;
			}
		}
	}

	//参数
	.canshu {
		margin: 15px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;

		& .canshu_top {
			padding: 5px;
			display: flex;
			justify-content: space-between;

			& .canshu_top_left {
				color: #A9A9A9;
			}

			& .canshu_top_right {
				// 样式
			}
		}

		& .canshu_btn {
			// 样式
			line-height: 25px;

			.canshu_btn_list {
				display: flex;
				// height: 25px;
				margin: 10px;

				.canshu_btn_img {}

				.canshu_btn_img image {
					width: 25px;
					height: 25px;
				}
			}

			.canshu_btn_title {
				color: #666666;
				font-size: 12px;
				margin-left: 5px;

				.canshu_btn_title_tit {
					color: #393939;
					font-size: 14px;
					font-weight: 400;
				}
			}
		}
	}

	//评价
	.pingjia {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;

		& .pingjia_top {
			padding: 5px;
			display: flex;
			justify-content: space-between;

			& .pingjia_top_left {
				color: #393939;
				font-weight: 600;
				font-size: 18px;
			}

			& .pingjia_top_right {
				// 样式
			}
		}

		& .pingjia_btn {
			display: flex;

			.pingjia_btn_tag {
				height: 25px;
				background: #F7F7F7;
				border-radius: 4px;
				padding: 5px 10px 5px 10px;
				margin-right: 5px;
				font-size: 14px;
				line-height: 25px;
				color: #666666;
			}
		}
	}

	//富文本
	.desc {
		// margin: 15px;
		// padding: 10px;
		background: #fff;
		border-radius: 8px;
	}

	.mg15 {
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.pops {
		padding: 15px;

		& .guige_topbox {
			display: flex;

			& .guige_left_topbox {
				// 样式
			}

			& .guige_left_topbox image {
				width: 80px;
				height: 80px;
				border-radius: 10px;
			}

			& .guige_right_topbox {
				margin-left: 15px;

				& .guige_top_price {
					color: #CB9668;
					font-size: 22px;
					font-weight: bold;
				}

				& .guige_top_price span {
					color: #CB9668;
					font-size: 12px;
				}

				& .guige_top_huaxianprice {
					color: #C4C4C4;
					font-size: 14px;
					margin-top: 1.5px;
					text-decoration: line-through;
				}

				& .guige_top_descprice {
					color: #A9A9A9;
					font-size: 14px;
					margin-top: 5px;
				}
			}
		}

		& .line {
			height: 1px;
			background: #F1F1F1;
			margin-top: 5px;
			margin-bottom: 5px;
		}

		& .canshus {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			margin-bottom: 10px;

			& .canshu_box {
				color: #393939;
				font-size: 14px;
			}
		}

		& .guige_title {
			color: #393939;
			font-size: 16px;
			font-weight: bold;
			margin-top: 20px;
		}

		& .guige_title .span {
			color: #C4C4C4;
			font-size: 12px;
			margin-left: 10px;
			font-weight: 400;
		}

		& .guige_box_list {
			display: flex;
			margin-top: 10px;
			width: 100%;

			& .guige_box {
				width: 20%;
				padding: 10px;
				border-radius: 12px;
				border: 1px solid #A9A9A9;
				margin-right: 5px;

				& .guige_box_tit {
					text-align: center;
					font-size: 16px;
					font-weight: bold;
					color: #393939;
				}

				& .guige_box_price {
					text-align: center;
					font-size: 14px;
					color: #A9A9A9;

				}
			}
		}

		& .peisong_box_list {
			display: flex;
			margin-top: 10px;
			width: 100%;

			& .peisong_box {
				width: 20%;
				padding: 10px;
				border-radius: 12px;
				border: 1px solid #A9A9A9;
				margin-right: 5px;

				& .peisong_box_img {
					width: 100%;
					display: flex;
					justify-content: center;
				}

				& .peisong_box_img image {
					width: 50px;
					height: 50px;
				}

				& .peisong_box_tit {
					color: #393939;
					text-align: center;
					font-size: 14px;
					font-weight: 400;
				}
			}
		}

		& .shuliang_box {
			display: flex;
			justify-content: space-between;
			margin-top: 15px;
			margin-bottom: 15px;

			& .shuliang_box_left {
				color: #393939;
				font-size: 18px;
				font-weight: bold;
				margin-top: 10px;
			}

			& .shuliang_box_right {
				// 样式
			}
		}

		& .pop_btn {
			height: 50px;
			margin-top: 10px;
			margin-bottom: 10px;
			background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
			border-radius: 8px;
			text-align: center;
			color: #fff;
			font-size: 18px;
			line-height: 50px;
			font-weight: 600;
		}

		& .gwc_btn {
			height: 45px;
			margin: 10px;
			background: #323232;
			border-radius: 25px;
			text-align: center;
			color: #fff;
			font-size: 18px;
			line-height: 45px;
			font-weight: 600;
		}

	}

	//参数pop
	.popscnas {
		padding: 15px;

		.canshutitle {
			display: flex;

			// 样式设定
			.canshu_icon image {
				width: 25px;
				height: 25px;
			}

			.canshu_title {
				margin-left: 10px;
				color: #000;
				font-size: 16px;
				font-weight: 600;
				line-height: 25px;
			}
		}

		.canshu_item {
			margin-top: 25px;
			margin-bottom: 25px;

			// 样式设定
			.canshu_small_title {
				color: #A9A9A9;
				font-size: 14px;
			}

			.canshu_small_desc {
				margin-top: 10px;
				color: #666666;
				font-size: 15px;
			}
		}
	}

	//轮播图
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.u-swiper__indicator {
		bottom: 30px;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	//
	.selectgg {
		background: #DAF1F1;
		color: var(--color-primary) !important;
		border: 1px solid var(--color-primary) !important;
	}

	.specselectcolor {
		color: var(--color-primary) !important;
	}

	button {
		border: 0;
		background-color: transparent;
		outline: none;
		line-height: normal;
		margin: 0;
		padding: 0;
	}

	button::after {
		border: none;
		width: 0;
		height: 0;
	}


	.showbottom {
		padding: 20px;
	}

	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;

		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}

		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;

			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}

		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}

	.act {
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}


	.botton {
		bottom: 20px;
		position: fixed;
		width: 90%;
		border-radius: 44rpx;
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	//分享


	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 900;
		opacity: 0.7;
	}

	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 999;
		transition: all 0.3s;
	}

	.scrolls {
		width: 100vw;
		height: 60vh;
		padding-top: 10upx;
		z-index: 500;
	}

	.activity-card {
		margin-top: -34rpx;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 16rpx 40rpx 0 40rpx;
	}

	.seckill-card {
		padding: 8px 10px 0 20px !important;
	}

	.seckill-card .timeTxt {
		padding: 0 6rpx;
	}
	
	.time {
		@include flex;
		align-items: center;
	
		&__custom {
			width: 22px;
			height: 22px;
			background-color: #ffffff;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
	
			&__day {
				width: 42px;
				height: 22px;
				background-color: #ffffff;
				border-radius: 4px;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}
	
			&__item {
				color: rgb(233, 51, 35);
				font-size: 12px;
				text-align: center;
	
				&__day {
					color: rgb(233, 51, 35);
					font-size: 12px;
					text-align: center;
				}
			}
		}
	
		&__doc {
			color: #ffffff;
			padding: 0px 4px;
		}
	
		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}
	.scrll-box {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
	}
	.scrpll-l {
		position: relative;
	}
	.scrpll-line {
		position: absolute;
		background-color: var(--color-primary);
		left: 0;
		top: 0;
	}
	.text-primary-con {
		color: var(--color-primary);
	}
</style>